<template>
  <div class="header-layout-container" :class="'header-layout-container--' + navbarLayoutType">
    <div class="logo-container">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:">
          <img style="height: 30px;" src="../assets/img/esin.png" alt=""/>
        </a>
        <a class="site-navbar__brand-mini" href="javascript:">
          <img style="height: 30px;" src="../assets/img/esin.png" alt=""/>
        </a>
      </h1>
    </div>
    <el-menu :default-active="activeIndex" class="menu-container" mode="horizontal"
             @select="handleSelect">
      <el-menu-item class="menu-item" index="home" @click="$router.push({ name: 'home' })">
        <icon-svg name="shouye" style="font-size: 22px"></icon-svg>
        <div class="menu-title">首页</div>
      </el-menu-item>
      <el-menu-item :index="item.menuId.toString()" class="menu-item" v-for="item in menuList" :key="item.menuId"
                    v-if="item.parentId === -1">
        <icon-svg :name="item.icon || ''" style="font-size: 22px"></icon-svg>
        <div class="menu-title">{{ item.name }}</div>
      </el-menu-item>
    </el-menu>

    <el-menu style="height: 61px;" class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
      <el-menu-item index="1">
        <template slot="title">
          <el-badge>
            <a :title="$t('MainNavbar.HelpDocuments')" href="#/help" style="font-size: 15px;display: inline;"
               class="el-icon-question" target="_blank">在线求助</a>
          </el-badge>
        </template>
      </el-menu-item>
      <el-menu-item index="2" @click="noticeAlert()">
        <template slot="title">
          <el-badge is-dot :value="sysLogCounts + updateLogCounts + serviceLog.length" :max="99">
            <a :title="$t('MainNavbar.messageNotification')" href="javascript:" style="font-size: 15px;display: inline;"
               class="el-icon-message-solid">消息</a>
          </el-badge>
        </template>
      </el-menu-item>
      <el-menu-item class="site-navbar__avatar" index="3">
        <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link" style="font-size: 15px;">
              <img style="width:20px;" src="~@/assets/img/avatar.png" :alt="userName"/>
              {{ userName }}
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="wccodeBtn()">{{ $t('MainNavbar.MerchantQRCode') }}</el-dropdown-item>
            <el-dropdown-item @click.native="updatePasswordHandle()">{{
                $t('MainNavbar.ChangePassword')
              }}
            </el-dropdown-item>
            <el-dropdown-item @click.native="shiftWork()">交接班</el-dropdown-item>
            <el-dropdown-item @click.native="switchHotel()">切换门店</el-dropdown-item>
            <el-dropdown-item @click.native="logoutHandle()">{{ $t('MainNavbar.SignOut') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
    <mainwxcode v-if="mainwxcodeVisible" ref="mainwxcode"></mainwxcode>
    <!-- 抽屉消息通知 -->
    <el-drawer title="我是标题" :visible.sync="drawerNotice" :with-header="false" :modal="false" :size="'300'">
      <!-- 内容 -->
      <el-tabs v-model="activeName" class="navbar-notice" @tab-click="handleClick" style="padding: 20px;padding-top: 10px;">
        <el-tab-pane label="业务通知" style="" name="first">
          <ul v-if="serviceLog.length > 0" style="padding-left: 0px;max-height: 80vh;overflow: hidden;overflow-y: scroll;margin-top: 0px;">
            <li v-for="item in serviceLog" :key="item.id" style="list-style-type: none;">
              <a href="#/app-noticelog/index?activeName=first">
                <h4 style="margin-bottom: 0px;margin-top: 0;">{{ item.title }}</h4>
                <p style="margin-top: 5px;">{{ item.creatTime }}</p>
              </a>
            </li>
          </ul>
          <p v-if="serviceLog.length == 0" style="margin-top: 3px;">{{ $t('MainNavbar.NoBusinessNotice') }}</p>
          <a href="#/app-noticelog/index?activeName=first">{{ $t('Common.SeeMore') }}</a>
        </el-tab-pane>
        <el-tab-pane label="系统消息" name="second">
          <ul v-if="sysLog.length > 0" style="padding-left: 0px;max-height: 80vh;overflow: hidden;overflow-y: scroll;margin-top: 0px;">
            <li v-for="item in sysLog" :key="item.id" style="list-style-type: none;">
              <a href="#/app-noticelog/index?activeName=second">
                <h4 style="margin-bottom: 0px;margin-top: 0;">{{ item.title }}</h4>
                <p style="margin-top: 5px;">{{ item.creatTime }}</p>
              </a>
            </li>
          </ul>
          <p v-if="sysLog.length == 0" style="margin-top: 3px;">{{ $t('MainNavbar.NoSystemMessageYet') }}</p>
          <a href="#/app-noticelog/index?activeName=second">{{ $t('Common.SeeMore') }}</a>
        </el-tab-pane>
        <el-tab-pane label="更新日志" name="third">
          <ul v-if="updateLog.length > 0" style="padding-left: 0px;max-height: 80vh;overflow: hidden;overflow-y: scroll;margin-top: 0px;">
            <li v-for="item in updateLog" :key="item.id" style="list-style-type: none;">
              <a href="#/app-noticelog/index?activeName=third">
                <h4 style="margin-bottom: 0px;margin-top: 0;">{{ item.title }}</h4>
                <p style="margin-top: 5px;">{{ item.creatTime }}</p>
              </a>
            </li>
          </ul>
          <p v-if="updateLog.length == 0" style="margin-top: 3px;">{{ $t('MainNavbar.NoUpdateLog') }}</p>
          <a href="#/app-noticelog/index?activeName=third">{{ $t('Common.SeeMore') }}</a>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <shiftWork v-if="shiftWorkVisible" ref="shiftWork"></shiftWork>

    <!-- 切换酒店-->
    <Thotelchoose ref="Thotelchoose" v-if="hotel.ThotelchooseVisible"></Thotelchoose>
  </div>
</template>

<script>
import UpdatePassword from "@/views/main-navbar-update-password.vue";
import mainwxcode from "@/views/main-wx-code.vue";
import shiftWork from "@/views/modules/app/thotelshiftover/thotelshiftover.vue";
import Thotelchoose from "@/views/popup/hotel/choose-the-format.vue";
import {clearLoginInfo} from "@/utils";

export default {
  name: 'layoutHeader',
  components: {
    UpdatePassword,
    mainwxcode,
    shiftWork,
    Thotelchoose
  },
  data() {
    return {
      activeIndex: 'home',
      dynamicMenuRoutes: [],
      updatePassowrdVisible: false,
      drawerNotice: false,
      activeName: 'first',
      sysLog: [],
      updateLog: [],
      serviceLog: [],
      importantLog: '',
      simportantLogApi: '',
      sysLogCounts: 0,
      updateLogCounts: 0,
      mainwxcodeVisible: false,
      //交班
      shiftWorkVisible: false,
      hotel: {
        ThotelchooseVisible: false,
      }
    };
  },
  created() {
    this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
    this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
    console.log('this.menuList', this.menuList)
  },
  methods: {
    handleSelect(key) {
      // 筛选出来 对应的目录 渲染到sidebar
      const subMenu = this.menuList.filter(item => item.type === 0 && item.parenttopId == key);
      console.log('key', key)
      const topBarMenuList = ['476']
      if (topBarMenuList.includes(key)) {
        this.topBarMenuList = subMenu
        this.sideBarMenuList = []
      } else {
        this.sideBarMenuList = subMenu
        this.topBarMenuList = []
      }
      // 把sidebarMenu 存储到vuex
      // this.sideBarMenuList = subMenu;
      // 默认选中第0个并进行跳转
      if (subMenu.length > 0 && subMenu[0].list && subMenu[0].list.length > 0) {
        this.gotoRouteHandle(subMenu[0].list[0])
      }
    },
    gotoRouteHandle(menu) {
      let route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
      if (route.length >= 1) {
        if (menu.type === -1) {
          this.$router.push(
            {
              name: route[0].name,
              query: {
                id: menu.menuId,
                childShowType: menu.childShowType,
                path: route.path
              },
            }
          )
        } else {
          this.$router.push({name: route[0].name})
        }
      }

    },
    switchStores() {
      this.$router.replace({
        name: "choosetheformat"
      });
    },
    toggleLang(lang) {
      if (lang == 'zh') {
        localStorage.setItem('locale', 'zh');
        this.$i18n.locale = localStorage.getItem('locale');
        this.$message({
          message: '切换为中文！',
          type: 'success'
        });
      } else if (lang == 'en') {
        localStorage.setItem('locale', 'en');
        this.$i18n.locale = localStorage.getItem('locale');
        this.$message({
          message: 'Switch to English!',
          type: 'success'
        });
      }
    },
    openLoginAlert() {
      this.$alert('需要您重新登录', '会话过期', {
        confirmButtonText: '确定',
        callback: action => {
        }
      });
    },
    //查询未读业务通知
    notReedServiceLog() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticeservice/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 0,
          limit: 99,
          state: 1
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.serviceLog = data.page.list;
        } else {
          this.serviceLog = [];
          clearInterval(this.simportantLogApi);
          // this.simportantLogApi = null;
          // this.openLoginAlert();
        }
      });
    },
    //登录系统
    importantLogApi2() {
      this.$http({
        url: this.$http.adornUrl('/sys/login2'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
      });
    },
    //查询重磅消息
    importantLogApi() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticesyslog/important_log'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.importantLog = data.content;
        }
      });
    },
    noticeAlert() {
      this.drawerNotice = true;
      this.notReedSysLog();
      this.notReedUpdateLog();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //未读系统消息列表
    notReedSysLog() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticesyslog/not_reed_log'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.sysLog = data.lists;
          this.sysLogCounts = data.sysLogCounts;
        } else {
          clearInterval(this.simportantLogApi);
        }
      });
    },
    //未读系统更新日志
    notReedUpdateLog() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelnoticeupdatelog/not_reed_log'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.updateLog = data.lists;
          this.updateLogCounts = data.updateLogCounts;
        }
      });
    },
    switchHotel() {
      this.hotel.ThotelchooseVisible = true;
      this.$nextTick(() => {
        this.$refs.Thotelchoose.init();
      });
    },
    wccodeBtn() {
      this.mainwxcodeVisible = true;
      this.$nextTick(() => {
        this.$refs.mainwxcode.init();
      });
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 交接班
    shiftWork() {
      this.shiftWorkVisible = true;
      this.$nextTick(() => {
        this.$refs.shiftWork.init();
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            clearLoginInfo();
            this.$router.push({name: 'login'});
            if (data && data.code === 0) {

            } else {
              this.$message.error(data.msg)
            }
          });
        })
        .catch(() => {
        });
    }
  },
  computed: {
    navbarLayoutType: {
      get() {
        return this.$store.state.common.navbarLayoutType;
      }
    },
    menuList: {
      get() {
        return this.$store.state.common.menuList
      },
      set(val) {
        this.$store.commit('common/updateMenuList', val)
      }
    },
    sideBarMenuList: {
      get() {
        return this.$store.state.common.sideBarMenuList
      },
      set(val) {
        this.$store.commit('common/updateSideBarMenuList', val)
      }
    },
    topBarMenuList: {
      get() {
        return this.$store.state.common.topBarMenuList
      },
      set(val) {
        this.$store.commit('common/updateTopBarMenuList', val)
      }
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      }
    }
  },
  watch: {},

  mounted() {
  },
};
</script>

<style scoped lang="scss">
@import "src/assets/scss/variables.scss";

.header-layout-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;

  .logo-container {
    flex-shrink: 0;
    height: 60px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    border-bottom: 1px solid #e6e6e6;
  }

  .menu-container {
    flex: 1;

    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .menu-title {
        height: 20px;
        line-height: 20px;
        margin-top: 6px;
      }
    }
  }

  &--inverse {
    .menu-container {
      background: transparent;

      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .menu-title {
          height: 20px;
          line-height: 20px;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>
